<template>
    <view class="container">
        <!-- #ifndef MP -->
        <view class="header">
            <view class="back-icon" @tap="goBack">
                <text>＜</text>
            </view>
            <view class="store-name">广东广州东方宝泰永旺店</view>
        </view>
        <!-- #endif -->

        <view class="content">
            <view class="order-title">
                订单详情 <text class="pickup-time">预计3-10分钟出取餐码</text>
            </view>

            <view class="product-list">
                <view class="product-item" v-for="(item, index) in orderItems" :key="index">
                    <view class="product-name">
                        {{ item.name }}
                        <view class="product-spec">{{ item.spec }}</view>
                        <view class="product-sugar">{{ item.sugar }}</view>
                    </view>
                    <view class="product-price">
                        ¥{{ item.price }} X {{ item.quantity }}
                    </view>
                </view>
            </view>

            <view class="order-total">
                此单为你省 ¥ {{ savings }}
                <text class="total-count">共{{ totalCount }}件，小计：</text>
                <text class="total-price">¥ {{ totalPrice }}</text>
            </view>

            <view class="contact-info">
                <view class="contact-title">联系手机：</view>
                <view class="contact-input">
                    <input type="number" v-model="phoneNumber" placeholder="请留手机方便客服沟通出餐情况" maxlength="11"
                        placeholder-class="input-placeholder" />
                </view>
            </view>

            <view class="notice">
                <view class="notice-icon">ⓘ</view>
                <view class="notice-text">温馨提示：如授单失败，10分钟后自动退款到微信钱包</view>
            </view>
        </view>

        <view class="bottom-bar">
            <view class="total-amount">¥ {{ totalPrice }}</view>
            <view class="pay-button" @tap="goToPay">
                去支付
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phoneNumber: '',
            orderItems: [
                {
                    name: '万里木兰',
                    spec: '标准冰',
                    sugar: '不另外加糖',
                    price: 4.00,
                    quantity: 3
                },
                {
                    name: '万里木兰',
                    spec: '标准冰',
                    sugar: '半糖',
                    price: 4.00,
                    quantity: 1
                }
            ]
        }
    },
    computed: {
        totalPrice() {
            return this.orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
        },
        totalCount() {
            return this.orderItems.reduce((sum, item) => sum + item.quantity, 0)
        },
        savings() {
            // 计算优惠金额，这里示例返回一个固定值
            return 'NaN'
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        goToPay() {
            // 处理支付逻辑
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}

.header {
    background: #fff;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;

    .back-icon {
        padding: 10rpx 20rpx;
        font-size: 36rpx;
    }

    .store-name {
        flex: 1;
        font-size: 32rpx;
        margin-left: 20rpx;
    }
}

.content {
    flex: 1;
    padding: 20rpx;
}

.order-title {
    font-size: 28rpx;
    margin-bottom: 20rpx;

    .pickup-time {
        color: #666;
        margin-left: 10rpx;
    }
}

.product-list {
    background: #fff;
    padding: 20rpx;
    border-radius: 8rpx;
    margin-bottom: 20rpx;

    .product-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .product-name {
            font-size: 28rpx;

            .product-spec,
            .product-sugar {
                font-size: 24rpx;
                color: #999;
                margin-top: 6rpx;
            }
        }

        .product-price {
            font-size: 28rpx;
        }
    }
}

.order-total {
    background: #fff;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;

    .total-count {
        float: right;
    }

    .total-price {
        color: #333;
        font-weight: bold;
    }
}

.contact-info {
    background: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .contact-title {
        font-size: 28rpx;
        margin-bottom: 10rpx;
    }

    .contact-input {
        input {
            width: 100%;
            height: 60rpx;
            font-size: 26rpx;
            padding: 0 20rpx;
        }
    }
}

.input-placeholder {
    color: #999;
    font-size: 26rpx;
}

.notice {
    display: flex;
    align-items: center;
    padding: 20rpx;
    font-size: 26rpx;
    color: #666;

    .notice-icon {
        color: #ff4d4f;
        margin-right: 10rpx;
    }
}

.bottom-bar {
    background: #fff;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid #eee;

    .total-amount {
        font-size: 36rpx;
        color: #ff4d4f;
        font-weight: bold;
    }

    .pay-button {
        background: #ff4d4f;
        color: #fff;
        padding: 20rpx 60rpx;
        border-radius: 8rpx;
        font-size: 32rpx;
    }
}
</style>